<!-- 01
    作用
    让元素相互叠加
    语法
    1.position-relative相对定位
    2.position-absolute绝对定位
    3.position-fixed固定定位
    +
    left/right/top/bottom:n px;（相对与左右上下的距离）
-->

<!-- 02相对定位
    特点
    1.以自己原来的位置为参考系
    2.相对定位的元素不会脱离文档流
    3.相对定位的元素不会改变原来的位置（虚空占原来的位置）
    4.同时都写，只生效left和top
-->

<!--03绝对定位
    特点
    1.以最近的一个非static定位的父元素为参考系（没有就以body为参考系）
    2.绝对定位的元素会脱离文档流，变为行内块元素
    3.绝对定位的元素会改变原来的位置（原来的位置被其他元素填充）
    4.同时都写，只生效left和top
-->

<!-- 04子绝父相
    工作中，父级用相对定位，子级用绝对定位
-->

<!-- 05绝对居中
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50% -50%);
-->

<!-- 06固定定位
    特点
    1.以浏览器为参考系
    2.固定定位的元素会脱离文档流
    3.固定定位的元素会改变原来的位置（原来的位置被其他元素填充）
    4.同时都写，只生效left和top
    5.变为行内块元素
-->

<!-- 07元素层级关系
    定位高级>浮动>文档流
-->